<template>
  <view class="container">
    <view class="search-box" v-if="search_box">
      <u-search :show-action="true"
                :show-icon="true"
                shape="square"
                bg-color="white"
                v-model="keyword"
                :show-action-icon="true"
                :placeholder="'搜索想要的内容'"
                @search="search"
                @custom="search"
                @clear="search"
      />
    </view>
    <view class="banner-box" v-if="banner">
      <c_banner :dataList="banner.data_list" :itemStyle="banner.style" :itemIndex="banner.id"/>
    </view>
    <view class="nav-box" v-if="navs_box && navs">
      <c_navs :data_list="navs.data_list"/>
    </view>
    <view class="coupon-box" v-if="coupon_list">
      <c_coupon :dataList="coupon_list.data_list" :itemStyle="coupon_list.style"/>
    </view>
    <view class="recommend-goods-box" v-if="recommendGoods">
      <c_goods :dataList="recommendGoods.data_list" :itemStyle="recommendGoods.style"/>
    </view>
    <view class="goods-box" v-if="flowList">
      <u-waterfall v-model="flowList" ref="uWaterfall" :value="[]" id-key="item_id">
        <template v-slot:left="{leftList}">
          <c_waterfall_item :dataList="leftList" :lazy-load="lazyLoadConfig"/>
        </template>
        <template v-slot:right="{rightList}">
          <c_waterfall_item :dataList="rightList" :lazy-load="lazyLoadConfig"/>
        </template>
      </u-waterfall>
      <u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="getGoodsList()"></u-loadmore>
      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </view>

  </view>
</template>

<script>
import c_banner from "@/components/banner/c_banner.vue";
import c_coupon from "@/components/coupon/c_coupon.vue";
import c_goods from "@/components/goods/c_goods.vue";
import c_navs from "@/components/navs/c_navs.vue";
import c_waterfall_item from "@/components/waterfall/c_waterfall_item.vue";
import base_api from "@/common/base_api";
import goods_api from "@/common/goods_api";
import api from "@/common/base_api";

export default {
  components: {
    c_banner,
    c_coupon,
    c_goods,
    c_navs,
    c_waterfall_item
  },
  data() {
    return {
      search_box: true,
      navs_box: true,//导航栏
      keyword: '',
      banner: null,
      navs: null,
      coupon_list: null,
      recommendGoods: null,
      loadStatus: 'loadmore',
      flowList: [],
      lazyLoadConfig: {
        duration: 400,
        threshold: 0
      },
      has_more: true,
      queryParam: {
        page: 0,
        limit: 10
      },
      scrollTop: 0
    };
  },
  onShow() {

  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onLoad() {
    this.base_info()
    this.getHomeData()
    this.getGoodsList();
  },
  //下拉刷新
  onPullDownRefresh() {
    this.banner = null
    this.coupon_list = null
    this.recommendGoods = null
    this.flowList = []
    this.getHomeData()
    this.getGoodsList();
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)

  },
  //触底
  onReachBottom() {
    if (this.has_more) {
      this.getGoodsList()
    }
  },


  methods: {
    base_info(){
      api.baseInfo().then(res=>{
        if (res.code==0){
          if (res.data.app_name){
            uni.setNavigationBarTitle({
              title: res.data.app_name
            })
          }
        }
      })
    },
    search(e) {
      console.log(e)
      this.keyword = e || ''
      uni.navigateTo({
        url: '/pages/goods/index?keywords=' + e
      })
    },
    getHomeData() {
      base_api.homePage({
        from: 'home'
      }).then(res => {
        //console.log(res)
        if (res.code == 0) {
          if (res.data.banner) {
            this.banner = res.data.banner
          }
          if (res.data.coupon) {
            this.coupon_list = res.data.coupon
          }
          if (res.data.navs) {
            this.navs = res.data.navs
          }
          if (res.data.recommendGoods) {
            this.recommendGoods = res.data.recommendGoods
          }

        }
      })
    },

    formatList(list) {
      if (!list) {
        return
      }
      for (let i = 0; i < list.length; i++) {
        // 先转成字符串再转成对象，避免数组对象引用导致数据混乱
        let item = JSON.parse(JSON.stringify(list[i]))
        this.flowList.push(item);
      }
    },
    getGoodsList() {
      this.queryParam.page += 1
      goods_api.list(this.queryParam).then(res => {
        if (res.code === 0) {
          if (res.data.lazyLoadConfig) {
            this.lazyLoadConfig = res.data.lazyLoadConfig
          }
          if (res.data.list.length > 0) {
            this.$nextTick(function () {
              this.formatList(res.data.list)
            })
          } else {
            this.has_more = false
            this.loadStatus = 'nomore'
          }

        }
      })
    },


  }
}
</script>

<style lang="scss">
@import "index.scss";
</style>
